<template>
  <div class="box">
    <el-card class="box-card">
      <!-- 第一行标题 -->
      <el-row>
        <el-col :span="20">黑马教育</el-col>
        <el-col :span="4">
          <el-row style="padding-left: 4px">
            <el-col :span="12">负责人</el-col>
            <el-col :span="12">
              <el-dropdown>
                <span> 操作 <i class="el-icon-arrow-down" /> </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    @click.native="addDialog('')"
                  >添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 树状组织结构 -->
      <el-tree :data="data" :props="defaultProps">
        <template #default="{ data }">
          <el-row
            type="flex"
            justify="space-between"
            align="middle"
            style="height: 40px; width: 100%"
          >
            <el-col :span="20">
              <span>{{ data.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{ data.manager }}</el-col>
                <el-col>
                  <!-- 下拉菜单 element -->
                  <el-dropdown>
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <!-- 下拉菜单 -->
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        @click.native="addDialog(data.id)"
                      >添加子部门</el-dropdown-item>
                      <el-dropdown-item
                        @click.native="editDialog(data)"
                      >编辑部门</el-dropdown-item>
                      <el-dropdown-item
                        @click.native="delDep(data.id)"
                      >删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </el-card>
    <!-- 添加部门 dialog -->
    <el-dialog
      :title="isEdit ? '编辑子部门' : '添加子部门'"
      :visible.sync="addDialogVisible"
    >
      <addDiaDep
        v-if="addDialogVisible"
        ref="addDiaFrom"
        :add-dialog-visible.sync="addDialogVisible"
        :pid="pid"
        :is-edit="isEdit"
        :ele="ele"
        @loadAddDiaDep="diaDepartments"
      />
    </el-dialog>
  </div>
</template>

<script>
// arrayToTree 插件 树形数据转换使用步骤1
// var arrayToTree = require('array-to-tree')
// 使用自己封装的工具函数 实现树形数据转换
import digui from '../../utils/tree'
import { getDepartments, delDepartment } from '../../api/departments'
import addDiaDep from './addDiaDep.vue'
export default {
  components: {
    addDiaDep
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }, // tree中的数据
      addDialogVisible: false,
      pid: '',
      isEdit: false,
      ele: {}
    }
  },

  created() {
    this.loadDepartments()
  },
  methods: {
    async loadDepartments() {
      const res = await getDepartments().catch((e) => e)
      // 保存数据
      if (res.data.code === 10000) {
        // arrayToTree 插件 树形数据转换使用步骤 2
        // this.data = arrayToTree(res.data.data.depts, {
        //   parentProperty: 'pid',
        //   customID: 'id'
        // })
        this.data = digui(res.data.data.depts) // 自定义工具函数 解决树形数据转换
      }
      // 后端返回的数据中 第一条是公司信息，它应该直接就是tree的根节点
      // 为了后面计算方便，把它直接取出来
    },
    diaDepartments() {
      this.$refs.addDiaFrom.hSuccess()
      this.addDialogVisible = false
      this.ele= {}
      this.loadDepartments()
    },
    addDialog(pid) {
      this.addDialogVisible = true
      this.isEdit = false
      this.pid = pid

    },
    editDialog(data) {
      this.addDialogVisible = true
      this.isEdit = true
      this.pid = data.id
      this.ele = data
    },
    delDep(id) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await delDepartment(id).catch((e) => e)
          if (res.data.code !== 10000) return
          this.loadDepartments()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}
.box-card {
  padding: 30px 120px;
}
::v-deep .el-dialog {
  .el-dialog__header {
    background: #fff;
  }
  .el-dialog__header .el-dialog__title {
    color: #000;
  }
}
</style>
